<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>JSBB - Vue前后端不分离</title>
    <link rel="stylesheet" th:href="@{/static/element/index.css}"/>
    <link rel="icon" th:href="@{/static/favicon.ico}"/>
</head>
<body>
<div id="app">
    <template>
        <el-container class="index-container">
            <el-header class="index-header">
                <span class="index-title">JSBB</span>
                <div class="index-userInfo">
                    <span style="margin-right: 10px;">{{sysUser.fullName}}</span>
                    <el-dropdown trigger="click" @command="handleCommand" style="margin-right: 10px; cursor: pointer">
                        <el-avatar icon="el-icon-user-solid" size="medium" :src="avatar"></el-avatar>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="updateData">个人资料</el-dropdown-item>
                            <el-dropdown-item command="updatePwd">修改密码</el-dropdown-item>
                            <el-dropdown-item command="logout" divided>注销</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </el-header>

            <el-container>
                <el-aside width="200px" class="index-aside">
                    <el-menu unique-opened background-color="#545c64" text-color="#fff" active-text-color="#409EFF" :default-active="activePath">
                        <template v-for="(item,index) in sysMenu">
                            <el-submenu :key="index" :index="index+''">
                                <template slot="title"><i :class="item.icon"></i>{{item.menuName}}</template>
                                <el-menu-item v-for="child in item.children" :index="child.url" @click="addTab(child.menuName, child.url)">
                                    <template slot-scope="scope"><i :class="child.icon"></i>{{child.menuName}}</template>
                                </el-menu-item>
                            </el-submenu>
                        </template>
                    </el-menu>
                </el-aside>

                <el-main>
                    <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" @tab-click="clickTab" style="height: 99%;">
                        <el-tab-pane :key="item.name" v-for="(item) in editableTabs" :label="item.title" :name="item.name" style="height: 100%;">
                            <iframe :src="item.content" style="height: 100%;width: 100%;border: none"></iframe>
                        </el-tab-pane>
                    </el-tabs>
                </el-main>
            </el-container>
        </el-container>

        <el-dialog title="个人资料" width="55%" :visible.sync="dataDialog" :modal="false" :close-on-click-modal="false">
            <el-form :model="dataForm" ref="dataForm" :rules="dataFormRules" label-width="100px">
                <el-form-item label="性别" prop="sex">
                    <el-radio-group v-model="dataForm.sex">
                        <el-radio :label="1">男</el-radio>
                        <el-radio :label="2">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="出生日期" prop="birthDate">
                    <el-date-picker v-model="dataForm.birthDate" type="date" placeholder="选择日期" style="width:100%"></el-date-picker>
                </el-form-item>
                <el-form-item label="手机号码" prop="phone">
                    <el-input v-model="dataForm.phone" maxlength="11"></el-input>
                </el-form-item>
                <el-form-item label="省市区" prop="province">
                    <el-cascader v-model="dataForm.province" :options="regionList" :show-all-levels="false" clearable
                                 :props="{value:'id', label:'menuName', checkStrictly:true, expandTrigger:'hover', emitPath:false}"></el-cascader>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input v-model="dataForm.address"></el-input>
                </el-form-item>
                <el-form-item label="头像" prop="avatar">
                    <el-upload class="avatar-uploader" :action="uploadUrl" :headers="uploadHeaders" :data="uploadData" :show-file-list="false"
                               :on-success="handleAvatarSuccess.bind(this,'head')" :before-upload="beforeAvatarUpload">
                        <el-avatar v-if="dataForm.avatar" :src="dataForm.avatar"></el-avatar>
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item>
                    <el-button @click="dataDialog = false">取 消</el-button>
                    <el-button type="primary" @click="dataFormSubmit">确 定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <el-dialog title="修改密码" width="55%" :visible.sync="pwdDialog" :modal="false" :close-on-click-modal="false">
            <el-form :model="pwdForm" ref="pwdForm" :rules="pwdFormRules" label-width="100px">
                <el-form-item label="旧密码" prop="oldPwd">
                    <el-input v-model="pwdForm.oldPwd"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newPwd">
                    <el-input v-model="pwdForm.newPwd"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="confirmPwd">
                    <el-input v-model="pwdForm.confirmPwd"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="pwdDialog = false">取 消</el-button>
                    <el-button type="primary" @click="pwdFormSubmit">确 定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </template>
</div>
</body>
<script th:src="@{/static/js/axios.min.js}"></script>
<script th:src="@{/static/js/common.js}"></script>
<script th:src="@{/static/js/vue.min.js}"></script>
<script th:src="@{/static/element/index.js}"></script>
<script th:src="@{/static/js/index.js}"></script>
<script th:src="@{/static/js/jquery.min.js}"></script>
<script th:src="@{/static/layer/layer.js}"></script>
<style>
.index-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}
.index-header {
    background-color: #403f3e;
    color: #409EFF;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: content-box;
    padding: 0px;
}
.index-aside {
    background-color: #545c64;
}
.index-title {
    color: #fff;
    font-size: 22px;
    display: inline;
    margin-left: 8px;
}
.index-userInfo {
    font-size: 14px;
    display: flex;
    align-items: center
}
.el-submenu .el-menu-item {
    width: 199px;
    min-width: 175px;
}
</style>
</html>
